import { useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import api from "../request";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import PoemList from "../Component/PoemList";
import PaginationBar from "../Component/PaginationBar";
import { Loading, LoadingContent, LoadingSkeleton } from "../Component/Loading";
import { Placeholder } from "react-bootstrap";


const PAGE_SIZE = 20;

/**
 * 诗词列表页面
 */
function PoemsPage() {
    let [searchParams, setSearchParams] = useSearchParams();
    /** @typedef {[PoemSimpleResponseDTO, ]} */
    const [poems, setPoems] = useState(null);
    const [currentPage, setCurrentPage] = useState(0);
    const [totalPages, setTotalPages] = useState(0);

    useEffect(() => {
        let page = searchParams.get('page') ? parseInt(searchParams.get('page')) : 0;
        api.listPoems({
            page: page,
            size: PAGE_SIZE
        }, (err, data, _) => {
            if (err) throw err;
            setPoems(data.data.list);
            setTotalPages(data.data.totalPage);
            setCurrentPage(page);
        });
    }, [searchParams]);

    function gotoPage(page) {
        // navigate(`/poem?page=${page}`)
        setSearchParams({ page: page });
        // setCurrentPage(page);
        window.scrollTo(0, 0);
        
    }

    return (
        <Container>
            <h1>诗词</h1>
            <Loading loaded={poems}>
                <LoadingContent>
                    <PoemList poems={poems} />
                    
                    <br />
                    <PaginationBar
                        currentPage={currentPage}
                        totalPages={totalPages}
                        gotoPageCallback={gotoPage}
                    />

                </LoadingContent>
                <LoadingSkeleton>
                    <br />
                    <Placeholder as="div" animation="wave">
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                    </Placeholder>
                </LoadingSkeleton>
            </Loading>
        </Container>
    );
}

export default PoemsPage;